import React, { useState } from "react";
import "./inter-detail.css";
import rehypeRaw from "rehype-raw";
import ReactMarkdown from "react-markdown";
import {useNavigate} from "react-router-dom";

// 定义题目数据的类型
interface Question {
    keyword: string;
    question: string;
    sampleAnswer: string;
    yourAnswer: string;
    score: string;
    time: string;
}

// 题目数据
const questions: Question[] = [
    {
        keyword: "Example1",
        question: "题目1：这是第一题的描述",
        sampleAnswer: `<ul><li>步骤1</li><li>步骤2</li></ul>`,
        yourAnswer: "你的答案1",
        score: "3分",
        time: "2024-11-23",
    },
    {
        keyword: "Example2",
        question: "题目2：这是第二题的描述",
        sampleAnswer: `<p><strong>注意：</strong>以下是步骤2的解释</p><ol><li>安装依赖</li><li>配置项目</li></ol>`,
        yourAnswer: "你的答案2",
        score: "5分",
        time: "2024-11-22",
    },
    // 更多题目...
];


const DetailPage: React.FC = () => {
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(0);

    const navigate = useNavigate();
    // 上一题
    const prevQuestion = () => {
        if (currentQuestionIndex > 0) {
            setCurrentQuestionIndex((prev) => prev - 1);
        }
    };

    // 下一题
    const nextQuestion = () => {
        if (currentQuestionIndex < questions.length - 1) {
            setCurrentQuestionIndex((prev) => prev + 1);
        }
    };

    // 跳转到指定题目
    const selectQuestion = (index: number) => {
        setCurrentQuestionIndex(index);
    };

    const currentQuestion = questions[currentQuestionIndex];

    const handleHistory = () => {
        navigate('/history');
    };
    return (
        <div className="detail-page">
            <div className="header-container">
                <h1>题目详情</h1>
                <button className="botombtn" onClick={handleHistory}>面试记录</button>
            </div>
            <div className="question-card">
                <p><strong>关键字：</strong>{currentQuestion.keyword}</p>
                <p><strong>题目：</strong>{currentQuestion.question}</p>
                <p><strong>示例答案：</strong></p>
                <div className="markdown-answer">
                    {/* 使用 ReactMarkdown 渲染 HTML 内容为 Markdown */}
                    <ReactMarkdown rehypePlugins={[rehypeRaw]}>
                        {currentQuestion.sampleAnswer}
                    </ReactMarkdown>
                </div>
                <p><strong>你的答案：</strong>{currentQuestion.yourAnswer}</p>
                <p><strong>时间：</strong>{currentQuestion.time}</p>
                <p><strong>评分：</strong>{currentQuestion.score}</p>
            </div>

            <div className="controls">
                <button onClick={prevQuestion} disabled={currentQuestionIndex === 0}>
                    上一题
                </button>

                <button onClick={nextQuestion} disabled={currentQuestionIndex === questions.length - 1}>
                    下一题
                </button>
            </div>

            <div className="pagination">
                {questions.map((_, index) => (
                    <button
                        key={index}
                        className={`page-button ${currentQuestionIndex === index ? "active" : ""}`}
                        onClick={() => selectQuestion(index)}
                    >
                        {index + 1}
                    </button>
                ))}
            </div>
        </div>
    );
};

export default DetailPage;
